<template>
	<view class="content">
		<view class="videoDes flex-c">
			请先观看使用视频
		</view>
		<video
			:src= "staticUrl + '/video/useInstruction/WearDevice.mp4'"
			:poster= "staticUrl + '/video/useInstruction/surface/useInstruction.jpg'"
			controls
			autoplay="true"
			show-center-play-btn
			objectFit="fill"></video>
		<view v-if="time > 0" class="Btn_View noSelect flex-c">
			<text>跳过({{time}}S)</text>
		</view>
		<view v-else class="Btn_View_choice select flex-c" @click="jump()">
			<text>跳过</text>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			staticUrl:this.$config.StaticUrl,
			time:10,
		};
	},
	onLoad() {
		let T = setInterval(() =>{
			this.time--;
			if(this.time <= 0){
				clearInterval(T);
			}
		},1000)
	},
	methods: {
		jump() {
			console.log('jump');
			uni.switchTab({
				url: '../../detection/detection'
			});
		}
	}
};
</script>

<style>
page {
	background-color: #e5e5e5;
}

.content {
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
video {
	width: 750rpx;
}
.videoDes {
	margin: 50rpx 0;
	font-size: 1.3rem;
}
.flex-c {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.Btn_View,.Btn_View_choice {
	width: 702rpx;
	height: 100rpx;
	margin-top: 200rpx;
	border-radius: 50px;
	font-size: 35rpx;
	font-weight: bold;
	color: white;
	box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.2);
}
.noSelect{
	background-color: #999999;
}
.select{
	background-color: #0659c7;
}
.Btn_View_choice:active {
	box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.2);
}
</style>
